<template>
  <div class="index">
    <div class="index-div">
      <div class="index-div-div"><img class="index-div-img" src="../../assets/images/index/mdLogo.png" alt=""></div>
      <div class="index-div-div1">
        <p class="index-div-p">专属服务顾问：{{ counselorName }}</p>
        <p class="index-div-p index-div-p1">电话：{{ counselorPhone }}</p>
      </div>
      <div class="index-div-div2">
        <div class="index-div-div3"><img class="index-div-img1" src="../../assets/images/index/xcx.jpg" alt=""></div>
        <p class="index-div-p2">扫一扫进入学员小程序</p>
      </div>
    </div>
    <div class="index-div1">
      <ul>
        <li>
          <p class="index-div1-p">培训人数</p>
          <div class="index-div1-div">
            <h1 class="index-div1-h1">{{ studentNum }}</h1>
            <!--<div class="index-div1-imgDiv">-->
              <!--<div>-->
                <!--<img v-if="topArrow" src="../../assets/images/index/topArrow.png" alt="" class="index-div1-img">-->
                <!--<img v-if="!topArrow" src="../../assets/images/index/botArrow.png" alt="" class="index-div1-img">-->
              <!--</div>-->
              <!--<span>0</span>-->
            <!--</div>-->
          </div>
        </li>
        <li>
          <p class="index-div1-p">待缴费人数</p>
          <div class="index-div1-div">
            <h1 class="index-div1-h1">{{ unPayPeopleNum }}</h1>
            <!--<div class="index-div1-imgDiv">-->
              <!--<div>-->
                <!--<img v-if="topArrow" src="../../assets/images/index/topArrow.png" alt="" class="index-div1-img">-->
                <!--<img v-if="!topArrow" src="../../assets/images/index/botArrow.png" alt="" class="index-div1-img">-->
              <!--</div>-->
              <!--<span>0</span>-->
            <!--</div>-->
          </div>
        </li>
        <li>
          <p class="index-div1-p">今日上课人数</p>
          <div class="index-div1-div">
            <h1 class="index-div1-h1">{{ studyNumToday }}</h1>
            <!--<div class="index-div1-imgDiv">-->
              <!--<div>-->
                <!--<img v-if="topArrow" src="../../assets/images/index/topArrow.png" alt="" class="index-div1-img">-->
                <!--<img v-if="!topArrow" src="../../assets/images/index/botArrow.png" alt="" class="index-div1-img">-->
              <!--</div>-->
              <!--<span>0</span>-->
            <!--</div>-->
          </div>
        </li>
        <li>
          <p class="index-div1-p">已获证人数</p>
          <div class="index-div1-div">
            <h1 class="index-div1-h1">{{ certificateNum }}</h1>
            <!--<div class="index-div1-imgDiv">-->
              <!--<div>-->
                <!--<img v-if="topArrow" src="../../assets/images/index/topArrow.png" alt="" class="index-div1-img">-->
                <!--<img v-if="!topArrow" src="../../assets/images/index/botArrow.png" alt="" class="index-div1-img">-->
              <!--</div>-->
              <!--<span>0</span>-->
            <!--</div>-->
          </div>
        </li>
        <li>
          <p class="index-div1-p">未获证人数</p>
          <div class="index-div1-div">
            <h1 class="index-div1-h1">{{ unCertificateNum }}</h1>
            <!--<div class="index-div1-imgDiv">-->
              <!--<div>-->
                <!--<img v-if="topArrow" src="../../assets/images/index/topArrow.png" alt="" class="index-div1-img">-->
                <!--<img v-if="!topArrow" src="../../assets/images/index/botArrow.png" alt="" class="index-div1-img">-->
              <!--</div>-->
              <!--<span>0</span>-->
            <!--</div>-->
          </div>
        </li>
      </ul>
    </div>
    <div class="index-div2">
      <div class="index-div2-div">
        <div class="index-div2-imgDiv" @click="getStudentsInfo()"><img class="index-div2-img" src="../../assets/images/index/pay.png" alt=""></div>
        <div class="index-div2-imgDiv" @click="getStudentsInfo()"><img class="index-div2-img" src="../../assets/images/index/infomation.png" alt=""></div>
        <div class="index-div2-imgDiv" @click="getStudentsInfo()"><img class="index-div2-img" src="../../assets/images/index/guanli.png" alt=""></div>
      </div>
      <div class="index-div2-div">
        <div class="index-div2-imgDiv1" onclick="window.open('https://www.yuque.com/docs/share/e7a88a7f-e98b-4e55-984e-2654de6acc89?#','_blank')"><img class="index-div2-img" src="../../assets/images/index/zhinan.png" alt=""></div>
        <div class="index-div2-imgDiv1" @click="getStudentsInfo()"><img class="index-div2-img" src="../../assets/images/index/daoru.png" alt=""></div>
        <div class="index-div2-imgDiv1" onclick="window.open('https://rl-pri.oss-cn-shenzhen.aliyuncs.com/md/other/2020/7/2020-07-13/1594649307207_040.xls','_blank')"><img class="index-div2-img" src="../../assets/images/index/muban.png" alt=""></div>
        <div class="index-div2-imgDiv1" @click="getOrderInfo()" ><img class="index-div2-img" src="../../assets/images/index/dingdan.png" alt=""></div>
      </div>
    </div>
  </div>
</template>

<script>
import { companyHome } from '@/api/companyOperate'
import CountTo from 'vue-count-to'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'Index',
  components: {
    CountTo,
    Pagination
  },
  data() {
    return {

      studentNum: 0, // 培训人数
      studyNumToday: 0, // 今日上课人数
      counselorName: '', // 顾问名字
      counselorPhone: '', // 顾问名字
      payPeopleNum: 0, // 已经付费人数
      unPayPeopleNum: 0, // 待付费人数
      certificateNum: 0, // 已获证人数
      unCertificateNum: 0, // 未获证人数/未通过人数
      completeInfo: undefined, // 是否完善信息。0未完善，1已完善

      topArrow: true,
      initPara: {
        companyId: undefined
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 初始化参数
    init: function() {
      // if (this.$route.query.companyId != null) {
      //   this.initPara.companyId = this.$route.query.companyId
      // } else {
      //   this.initPara.companyId = 1
      // }
      this.getList()
    },
    getList() {
      companyHome().then(response => {
        this.studentNum = response.data.data.studentNum // 培训人数
        this.studyNumToday = response.data.data.studyNumToday// 今日上课人数
        this.counselorName = response.data.data.counselorName// 顾问名字
        this.counselorPhone = response.data.data.counselorPhone // 顾问名字
        this.payPeopleNum = response.data.data.payPeopleNum // 已经付费人数
        this.unPayPeopleNum = response.data.data.unPayPeopleNum // 待付费人数
        this.certificateNum = response.data.data.certificateNum// 已获证人数
        this.unCertificateNum = response.data.data.unCertificateNum // 未获证人数/未通过人数
        this.completeInfo = response.data.data.completeInfo // 是否完善信息。0未完善，1已完善
        this.completeInfoFun()
      })
    },
    completeInfoFun() {
      if (this.completeInfo === 0) {
        this.$confirm('您的信息未完善, 是否跳转完善信息页面', '提示', {
          showClose: false,
          showCancelButton: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.getCompleteInfo()
          this.$message({
            type: 'success',
            message: '跳转完善信息页面'
          })
        }).catch(() => {
          this.getCompleteInfo()
          // this.$message({
          //
          //   type: 'info',
          //   message: '跳转失败'
          // })
        })
      }
    },
    getStudentsInfo() {
      this.$router.push({ path: '/companyOperateManage/companyStudentList' })
    },
    getOrderInfo() {
      this.$router.push({ path: '/companyOperateManage/companyOrder' })
    },
    getCompleteInfo() {
      this.$router.push({ path: '/companyOperateManage/completeInfo' })
    },
    getGuide() {
      this.$router.push({ path: ' https://www.yuque.com/docs/share/e7a88a7f-e98b-4e55-984e-2654de6acc89?#' })
    }
  }
}
</script>

<style scoped>
*{
  padding:0;
  margin:0;
}
ul li{
  list-style: none;
}
img{
  display: block;
}
.index{
  width:100%;
  background-color: #f2f2f2;
  height: 100%;
}
.index-div{
  background-color: #fff;
  padding-left: 8%;
  padding-right: 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 15px;
}
.index-div-div{
  width: 20%;
}
.index-div-img{
  width:100%  ;
}
.index-div-div1{
  display: flex;
}
.index-div-p{
  font-size: 12px;
  color:#595959;
  margin-top: 10%;
}
.index-div-p1{
  margin-left: 60px;
}
.index-div-div2{
}
.index-div-div3{
  width:60%;
  margin: 0 auto;
  margin-top: 20px;
}
.index-div-img1{
  width:100%  ;
  margin-bottom: 10px;
}
.index-div-p2{
  font-size: 12px;
  color: #404040;
  text-align: center ;
}
.index-div1{
  padding:33px 8%;
  background-color: #fff;
}
.index-div1 ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.index-div1 ul li{
}
.index-div1-div{
  display: flex;
  margin-top:9px;
}
.index-div1-imgDiv{
  display: flex;
  margin-left: 14px;
  align-items: center;
}
.index-div1-p{
  font-size: 12px;
  color: #262626;

}
.index-div1-h1{
  color: #262626;
  font-size: 21px;
}
.index-div1-img{
  width:7px;
}
.index-div1-imgDiv span{
  font-size: 14px;
  color: #808080;
  font-weight: bold;
}
.index-div2{
  padding:36px 8%;
}
.index-div2-div{
  display: flex;
  justify-content: space-between;
}
.index-div2-imgDiv{
  width: 33%;
  margin-bottom: 5px;
}
.index-div2-img{
  width: 100%;
}
.index-div2-imgDiv1{
  width:24.6%;
}
</style>
